<template>
  <div>
    <el-dialog @open="openDialog" :title="titleFont" class="tableDialog" width="1200px" :visible.sync="dialogVisible"   :close-on-click-modal="false">
      <el-tabs class="tabHead" v-model="taskSelectedTab">
        <el-tab-pane key="1" label="业务基本信息" name="baseInfo" v-if="titleFont=='业务详情'">
          <BusinessInfoDialog ref="BusinessInfoDialog"></BusinessInfoDialog>
          <div v-html="title"></div>
        </el-tab-pane>
        <el-tab-pane key="2"  label="货物明细" name="details" v-if="titleFont=='业务详情'">
          <BusinessProductInfo ref="BusinessProductInfo"></BusinessProductInfo>
        </el-tab-pane>
        <el-tab-pane key="3"  label="扣重设置" name="deuctSeting" v-if="titleFont!=='数量调整'">
          <BusinessDeductDialog ref="BusinessDeductDialog"></BusinessDeductDialog>
        </el-tab-pane>
        <el-tab-pane key="4"  label="路耗设置" name="lossSeting" v-if="titleFont!=='数量调整'">
          <BusinessLossDialog ref="BusinessLossDialog"></BusinessLossDialog>
        </el-tab-pane>
        <el-tab-pane key="5"  label="磅单设置" name="weightSeting" v-if="titleFont!=='数量调整'">
          <BusinessWeightTemplate ref="BusinessWeightTemplate"></BusinessWeightTemplate>
        </el-tab-pane>
        <el-tab-pane key="6"  label="质量要求" name="ziliang" v-if="titleFont!=='数量调整'">
          <BusinessProductQuatityIndex ref="BusinessProductQuatityIndex"></BusinessProductQuatityIndex>
        </el-tab-pane>
        <el-tab-pane key="7"  label="数量调整" name="number" v-if="titleFont=='业务详情'||titleFont=='数量调整'">
          <BusinessAdjustDialog ref="BusinessAdjustDialog"></BusinessAdjustDialog>
        </el-tab-pane>
        <el-tab-pane key="8"  label="流程图" v-if="procInsId && (titleFont=='业务详情'||titleFont=='数量调整')" name="prodress">
          <el-card class="box-card" shadow="hover">
            <flow-chart ref="chart1" v-if="procInsId" :processInstanceId="procInsId" />
          </el-card>
        </el-tab-pane>
       <el-tab-pane class="record" key="9"  label="流转记录" v-if="procInsId &&(titleFont=='业务详情'||titleFont=='数量调整')" name="form-forth">
          <el-card class="box-card" shadow="hover" style="margin-top: 5px">
            <el-steps :active="histoicFlowList.length">
              <el-step
                :key="index"
                v-for="(act, index) in histoicFlowList"
                :title="act.histIns.activityName"
                finish-status="success"
                :description="
                  (act.assigneeName || '') +
                  '    ' +
                  moment(act.histIns.endTime).format('YYYY-MM-DD HH:mm:ss')
                "
              ></el-step>
            </el-steps>
            <el-table border :data="histoicFlowList" style="width: 100%;margin-top: 10px">
              <el-table-column
                prop="histIns.activityName"
                label="执行环节"
                min-width="120"
              >
              </el-table-column>
              <el-table-column prop="assigneeName" label="执行人" min-width="100">
                <template slot-scope="scope">
                  {{scope.row.assigneeName | noValue}}
                </template>
              </el-table-column>
              <el-table-column prop="histIns.startTime" label="开始时间" min-width="170">
                <template slot-scope="scope">
                  {{ scope.row.histIns.startTime | formatDate }}
                </template>
              </el-table-column>
              <el-table-column prop="histIns.endTime" label="结束时间" min-width="170">
                <template slot-scope="scope">
                  {{ scope.row.histIns.endTime | formatDate }}
                </template>
              </el-table-column>
              <el-table-column prop="comment" label="审批意见" min-width="120">
                  <template slot-scope="scope">
                      {{scope.row.comment | noValue}}
                  </template>
              </el-table-column>
              <el-table-column prop="durationTime" label="任务历时">
                <template slot-scope="scope">
                  {{ scope.row.durationTime || "0秒" }}
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>
<script>
  import BusinessLossDialog from './businessLossDialog.vue'
  import BusinessInfoDialog from './businessInfoDialog.vue'
  import BusinessDeductDialog from './businessDeductDialog.vue'
  import BusinessAdjustDialog from './businessAdjustDialog.vue'
  import BusinessProductInfo from './businessProductInfo.vue'
  import BusinessProductQuatityIndex from './businessProductQuatityIndex.vue'
  import BusinessWeightTemplate from './businessWeightTemplate.vue'
  export default {
    components: {
      BusinessInfoDialog, // 业务基本信息
      BusinessDeductDialog, // 扣重设置
      BusinessAdjustDialog, // 数量调整
      BusinessProductInfo, // 货物明细
      BusinessWeightTemplate, // 磅单设置
      BusinessProductQuatityIndex, // 质量要求
      BusinessLossDialog // 路耗设置
    },
    props: {
      procInsId: {
        type: String,
        default: '1',
        required: true
      }
    },

    data () {
      return {
        procInsId1: '',
        title: '<span style="font-size:20px"></span>',
        titleFont: '',
        businessId: '',
        modelId: '',
        tableData: [],
        loading: false,
        dialogVisible: false,
        inputName: '',
        histoicFlowList: [],
        data: [],
        taskSelectedTab: 'deuctSeting',
        page: {
          pageSize: 10,
          pageNo: 1,
          total: 20
        }
      }
    },
    watch: {
      procInsId (newV, oldV) {
        this.procInsId1 = newV
      },
      taskSelectedTab (val) {
        if (val === 'prodress') {
          if (this.procInsId) {
            this.$refs.chart1.init()
        }
        }
      }
    },
    methods: {
      init (title) {
        this.titleFont = title
        this.dialogVisible = true
        this.businessId = this.$parent.businessId
        this.modelId = this.$parent.modelId
        this.$nextTick(() => {
          this.$http
            .get(`/flowable/task/histoicFlowList?procInsId=${this.procInsId}`)
            .then(({ data }) => {
              this.histoicFlowList = data.histoicFlowList
          })
      })
      },
      handleCurrentChange (e) {
        this.page.pageNo = e
        this.getCompanyList(this.page)
      },
      add () {
        this.$refs.editInfoDrawer.init('add')
      },

      openDialog () {
        this.$nextTick(() => {
          if (this.titleFont === '业务详情') {
            this.taskSelectedTab = 'baseInfo'
             // 调用业务基本信息
            this.$refs['BusinessInfoDialog'].getInfo(this.businessId)
            // 货物明细：左侧货物菜单数据
            this.$refs['BusinessProductInfo'].getProductList(this.businessId)
            // 数量调整列表
             this.$refs['BusinessAdjustDialog'].getList(this.businessId)
          }else if(this.titleFont==='数量调整'){
            this.taskSelectedTab = 'number'
          } else {
            this.taskSelectedTab = 'deuctSeting'
          }
          // 路耗列表
          this.$refs['BusinessLossDialog'].getLossList(this.businessId, this.modelId)
          // 扣重列表
          this.$refs['BusinessDeductDialog'].getList(this.businessId, this.modelId)

          // 质量要求：左侧货物菜单数据
          this.$refs['BusinessProductQuatityIndex'].getProductQuatityIndexList(this.businessId)
          // 磅单设置: 获取模版select
          this.$refs['BusinessWeightTemplate'].getList(this.businessId, this.modelId)
        })
      },
      tableRowClassName ({
        row,
        rowIndex
      }) {
        if (rowIndex % 2 === 1) {
          return 'warning-row'
        } else {
          return 'success-row'
        }
      },
      handleClose (done) {
        done()
      },
      close () {},
      doSubmit () {}
    }
  }
</script>
<style lang="scss" scoped>
  ::v-deep.tableDialog.el-dialog__wrapper {
    .el-dialog__body {
      padding-top: 0 !important;
    }
  }

  ::v-deep.tabHead {
    .el-tabs__header {
      margin-bottom: 20px;

      .el-tabs__item {
        font-size: 16px;
        padding: 0 10px;
      }
    }

    .el-tabs__content {
      height: 462px;
      overflow: auto;
    }
  }
</style>
